<template>
  <div class="upload-container">
    <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">
      {{ showTitle }}
    </el-button>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <el-upload
        :multiple="true"
        :limit="limitCount"
        :file-list="oss.fileList"
        :show-file-list="true"
        :on-remove="oss.handleRemove"
        :on-success="oss.handleSuccess"
        :before-upload="oss.handleBeforeUpload"
        :http-request="oss.upload"
        class="editor-slide-upload"
        action=""
        list-type="picture-card"
      >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确认</el-button>
    </el-dialog>
  </div>
</template>

<script>
import OSS, { presenter } from '@/components/Oss/oss'
const defaultOss = OSS({ pathOssOnline: 'article/' })

export default {
  name: 'PicSelector',
  mixins: [presenter(defaultOss)],
  props: {
    ossPath: {
      type: String,
      default: 'temp/'
    },
    color: {
      type: String,
      default: '#1890ff'
    },
    showTitle: {
      type: String,
      default: '上传'
    },
    limitCount: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      dialogVisible: false
    }
  },
  created() {
    this.oss.pathOssOnline = this.ossPath
  },
  methods: {
    handleSubmit() {
      if (!this.oss.checkAllSuccess()) {
        this.$message('图片还未上传成功，请等待')
        return
      }

      this.$emit('successCBK', Object.keys(this.oss.fileOptList).map(v => this.oss.fileOptList[v]))

      this.oss.resetChoose()

      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.editor-slide-upload {
  margin-bottom: 20px;
  /deep/ .el-upload--picture-card {
    width: 100%;
  }
}
</style>
